<script lang="ts" setup>
    const asyncValue = ref<boolean>(false);

    const changeHandler = (data: any): void =>
    {
        log(data);
    };

    const asyncChangeHandler = (): void =>
    {
        uni.showModal({
            title: "",
            content: `${asyncValue.value ? "确定要关闭吗" : "确定要开启吗"}`,
            success: (res: any) =>
            {
                if (res.confirm)
                {
                    asyncValue.value = !asyncValue.value;
                }
            }
        });
    };

</script>

<template>
    <!-- 开关 -->
    <u-layout
        :enable-refresh="false"
        title="开关组件示例"
    >
        <!-- 容器 -->
        <view class="container">
            <view class="line">
                <u-text text="基础功能" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-switch
                                @change="changeHandler"
                            />
                        </view>

                        <view class="ui-block">
                            <u-switch
                                :value="true"
                                @change="changeHandler"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="加载中" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-switch
                                :loading="true"
                                @change="changeHandler"
                            />
                        </view>

                        <view class="ui-block">
                            <u-switch
                                :loading="true"
                                :value="true"
                                @change="changeHandler"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="禁用" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-switch
                                :disabled="true"
                                @change="changeHandler"
                            />
                        </view>

                        <view class="ui-block">
                            <u-switch
                                :disabled="true"
                                :value="true"
                                @change="changeHandler"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="自定义尺寸" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-switch
                                :size="28"
                                @change="changeHandler"
                            />
                        </view>

                        <view class="ui-block">
                            <u-switch
                                :size="20"
                                :value="true"
                                @change="changeHandler"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="自定义颜色" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-switch
                                :loading="true"
                                :value="true"
                                active-color="#f56c6c"
                                @change="changeHandler"
                            />
                        </view>

                        <view class="ui-block">
                            <u-switch
                                :loading="true"
                                :value="true"
                                active-color="#5ac725"
                                @change="changeHandler"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="自定义样式" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-switch
                                :space="2"
                                :value="true"
                                active-color="#f56c6c"
                                inactive-color="rgba(230, 230, 230, 0.6)"
                                @change="changeHandler"
                            />
                        </view>

                        <view class="ui-block">
                            <u-switch
                                :space="2"
                                :value="true"
                                active-color="#5ac725"
                                inactive-color="rgba(230, 230, 230, 0.6)"
                                @change="changeHandler"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="异步" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-switch
                                :async="true"
                                :value="asyncValue"
                                @change="asyncChangeHandler"
                            />
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- //容器 -->
    </u-layout>
    <!-- //开关 -->
</template>

<style lang="scss" scoped>
    // 容器
    .container
    {
        .line
        {
            .title
            {
                font-size: 14px;
                line-height: 20px;
            }

            .block
            {
                overflow: hidden;
                margin-top: 4px;

                .ui-block-control
                {
                    display: flex;
                    align-items: center;

                    .ui-block:not(:last-child)
                    {
                        margin-right: 30px;
                    }
                }
            }

            &:not(:first-child)
            {
                margin-top: 16px;
            }
        }
    }
</style>